<script type="text/javascript">	
	google.maps.event.addDomListener(window, 'load', initialize);
	window.setInterval(function(){getChipList();}, 3000);

	var currentChipId = <?php echo Session::get('chip_id')?>;
	var chipList = [];
	var markersArray = [];
	var map;
	var eftelingmap;
	var gmarkers = [];

	var directionsDisplay = new google.maps.DirectionsRenderer({ suppressMarkers: true, preserveViewport: true });
	var directionsService = new google.maps.DirectionsService();
	var route = false;
	var from = new google.maps.LatLng();
	var to = new google.maps.LatLng();
	
    var ib = new InfoBox();

    var image = [];
    image['attractie'] = '<?php echo URL?>img/icons/map_icons/attractie.png';
    image['bagagelockers'] = '<?php echo URL?>img/icons/map_icons/bagagelockers.png';
    image['ehbo'] = '<?php echo URL?>img/icons/map_icons/ehbo.png';
    image['restaurant'] = '<?php echo URL?>img/icons/map_icons/restaurant.png';
    image['snoepwinkel'] = '<?php echo URL?>img/icons/map_icons/snoepwinkel.png';
    image['souvenirs'] = '<?php echo URL?>img/icons/map_icons/souvenirs.png';
    image['terminal'] = '<?php echo URL?>img/icons/map_icons/terminal.png';
    image['toilet'] = '<?php echo URL?>img/icons/map_icons/toilet.png';

	   
	function initialize(){
		getMap();
		//getEftelingMap();


		$.getJSON("<?php echo URL?>ajax/poi_location.php", function(data) {
			if(data.length > 0){
				$.each(data, function(key, value) {
					
					if(value['type_id'] == 1){ /* Het is een attractie */
						addMarker(value);
					}
					
						addLocation(value);

				});
			}
		});

		getChipList();
	}

	function addMarker(value){
		var position = new google.maps.LatLng(value['lat'], value['lng']);
		var category = value['type_name'];
		var name = value['name'];

		var marker = new google.maps.Marker({
	        position: position,
	        map: map,
	        icon: '<?php echo URL?>img/attractions/map/' + value['id'] + '.png',
	      });

	      marker.setZIndex(1);

	      


	      //markersArray[value['location_id']] = marker;
	      //markersArray.push(marker);
			
		google.maps.event.addListener(marker, 'click', function() {
			var options = [];
			options['name'] = name;
			(value['waittime'] == null ? options['waittime'] = 0 : options['waittime'] = value['waittime']);
			window.to = marker.position;
			ib.setOptions(createBox('attractie', options));
			ib.open(map, marker);
			
		});
	}
	
	function addLocation(value){
		var position = new google.maps.LatLng(value['lat'], value['lng']);
		var category = value['type_name'];
		var name = value['name'];

		var marker = new google.maps.Marker({
	        position: position,
	        map: map,
	        icon: image[category]
	      });

			
	      marker.mycategory = category;
	      //markersArray[value['location_id']] = marker;
	      gmarkers.push(marker);
			
		google.maps.event.addListener(marker, 'click', function() {
			var options = [];
			options['name'] = name;
			(value['waittime'] == null ? options['waittime'] = 0 : options['waittime'] = value['waittime']);
			window.to = marker.position;
			ib.setOptions(createBox('attractie', options));
			ib.open(map, marker);
		});
	}



	function show(category) {
	      for (var i=0; i<gmarkers.length; i++) {
	        if (gmarkers[i].mycategory == category) {
	        	gmarkers[i].setAnimation();
	        }
	      }
	    }

	
	function hide(category) {
	      for (var i=0; i<gmarkers.length; i++) {
	        if (gmarkers[i].mycategory == category) {
	          gmarkers[i].setAnimation(google.maps.Animation.BOUNCE);
	        }
	      }
	      ib.hide();
	    }
		

	function showButton(){
		$("#stopRoute").show();
	}

	function hideButton(){
		$("#stopRoute").hide();
	}
	
function stopRoute(){
	window.route = false;
	directionsDisplay.setMap(null);
	hideButton();
}


function createRoute(destination_lat, destination_lng){
	directionsDisplay.setMap(map);
	mapcanvas = document.getElementById('map-canvas');

	showButton();
	
	window.route = true;
	if(destination_lat == null || destination_lat == "") {
		var destination = to;
	} else {
		var destination = new google.maps.LatLng(destination_lat, destination_lng);
	}
	var origin = from;

	var request = {
		origin:origin,
		destination:destination,
		travelMode: google.maps.TravelMode.WALKING
	};

	directionsService.route(request, function(result, status) {
		if (status == google.maps.DirectionsStatus.OK) {
			directionsDisplay.setDirections(result);

			var distance = result.routes[0].legs[0].distance.value;
			if(distance < 30){
				stopRoute();
			}
		}
	});	
}
    
function getMap(){
	var mapOptions = {
			zoom: 16,
			scrollwheel: false,
			disableDoubleClickZoom: true,
			draggable: false,
			disableDefaultUI: true,
			center: new google.maps.LatLng(51.987695,5.9515),
			mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	
	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}

function getChipList(){
	$.getJSON("<?php echo URL?>ajax/chip_location.php", function(data) {
		$.each(data, function(key, value) {
				
			if(value['id'] == currentChipId){
				currentLocation = new google.maps.LatLng(value['lat'], value['lng']);
	
				if(currentLocation.toString() != from.toString()){
					window.from = currentLocation;
	
					if(window.route == true){
						createRoute("","");
					}
				};
			}

			if(window.markersArray[value['location_id']] == undefined){ /* Marker bestaat niet, dus toevoegen */
				if(value['id'] == currentChipId){ /* Eigen marker*/
    				var marker = new google.maps.Marker({
    		            position: new google.maps.LatLng(value['lat'], value['lng']),
    		            map: map,
    		            icon: '<?php echo URL ?>img/icons/map_icons/myself.png',
    		            title: value['name']
    		        });
				} else{ /* Andere markers */
					var marker = new google.maps.Marker({
    		            position: new google.maps.LatLng(value['lat'], value['lng']),
    		            map: map,
    		            icon: '<?php echo URL ?>img/icons/map_icons/others.png',
    		            title: value['name']
    		        });
				}

				marker.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
				
				google.maps.event.addListener(marker, 'click', function(){

					var options = [];
					options['name'] = value['name'];
					
					if(value['id'] == currentChipId){
						ib.setOptions(createBox('ik',options));
					}
					else{
						ib.setOptions(createBox('persoon',options));
					}
					
					window.to = marker.position;
					ib.open(map, marker);
						
				}); 

				markersArray[value['location_id']] = marker;
			}
			else{
				markersArray[value['location_id']].setPosition(new google.maps.LatLng(value['lat'], value['lng']));
			}
		});
	});
}

function hideBox(){
	  ib.hide();
}

function createBox(type, options){

	var settings = {
			disableAutoPan: false,
			maxWidth: 0,
			pixelOffset: new google.maps.Size(-122, -200),
			zIndex: null,
			boxStyle: { 
				background: "fff",
				opacity: 1,
				width: "250px",
			},
			closeBoxMargin: "13px 13px 2px 2px",
			closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif",
			infoBoxClearance: new google.maps.Size(1, 1),
			isHidden: false,
			pane: "floatPane",
			enableEventPropagation: false,
		};
	
	switch(type)
	{
	case 'attractie':
		settings['content'] = '<div class="box yellow rounded" style="position: absolute; width: 100%"><div class="outer_wrapper rounded"><div class="wrapper rounded" style="padding: 5px"><h2>' + options['name'] + '</h2><p>Wachttijd: ' + options['waittime'] + ' minuten</p><button onclick="javascript: hideBox(); createRoute(null,null);">Geef route</button></div><!-- wrapper --></div><!-- outer_wrapper --></div><!-- box -->';
		return settings;
		break;
	case 'ik':
		settings['content'] = '<div class="box yellow rounded" style="position: absolute; width: 100%"><div class="outer_wrapper rounded"><div class="wrapper rounded" style="padding: 5px"><h2>' + options['name'] + '</h2><p>U bent hier!</p></div><!-- wrapper --></div><!-- outer_wrapper --></div><!-- box -->';
		return settings;
	  break;
	case 'persoon':
		settings['content'] = '<div class="box yellow rounded" style="position: absolute; width: 100%"><div class="outer_wrapper rounded"><div class="wrapper rounded" style="padding: 5px"><h2>' + options['name'] + '</h2><button onclick="javascript: hideBox(); createRoute(null,null);">Geef route</button></div><!-- wrapper --></div><!-- outer_wrapper --></div><!-- box -->';
		return settings;
		break;
	}
}

  

$('document').ready(function() {
	
	setTimeout(function() {
	<? if(isset($_POST['attraction_lat'])) { ?>
	   	createRoute(<?php echo $_POST['attraction_lat'] ?>, <?php echo $_POST['attraction_lng'] ?>);
	  <? }	?>
	},2000);

	$('#filterbox .icon').click(function(){

		var category = $(this).attr('id');

		if($(this).hasClass('active')){
			$(this).removeClass('active');
			hide(category);
		}
		else{
			$(this).addClass('active');
			show(category);
		}
	})
});

</script>
<div id="stopRoute" style="z-index: 9999999; display: none; position: absolute; right: 0; background: #fff; padding: 5px;"><button onclick="javascript: stopRoute();">Stop route</button></div>

<div id="map-canvas" style="width:100%; height:100%;">

</div>